<div class="form-container">
<form [formGroup]="userInfoForm" (submit)="onSubmit()" class="container">
  <div fxLayout="row"  fxLayout.xs="column" fxLayoutAlign="space-between start">
    <div fxFlex="50">
        <mat-progress-bar mode='indeterminate' *ngIf='loading'></mat-progress-bar>
        <mat-form-field class="full-width-input">
            <mat-label>Id</mat-label>
          <input matInput formControlName="id">
        </mat-form-field>

        <mat-form-field class="full-width-input">
          <mat-label>Username</mat-label>
          <input matInput
            formControlName="userName">
        </mat-form-field>
        <mat-form-field class="full-width-input">
          <mat-label>First Name</mat-label>
          <input matInput placeholder="First name of the user"
            formControlName="firstName">
        </mat-form-field>
        <mat-form-field class="full-width-input">
          <mat-label>Last Name</mat-label>
          <input matInput placeholder="Last name of the user"
            formControlName="lastName">
        </mat-form-field>
        <app-external-account-form [form]="userInfoForm" [externalAccountIds]="user ? user.externalAccountIds : {}" [disableForm]="!editing"></app-external-account-form>
        <div class="action-buttons">
            <button mat-raised-button cdkFocusInitial *ngIf="!editing" (click)="onEditClick()">Edit</button>
            <button mat-raised-button color="primary" cdkFocusInitial *ngIf="editing">Save</button>
            <button mat-raised-button *ngIf="editing" (click)="onCancelClick()">Cancel</button>
        </div>
    </div>

    <div fxFlex="50" class="avatar-container">
        <h4>Avatar</h4>
        <img [src]="avatar" *ngIf="avatar" class="avatar"/>
        <div *ngIf="!avatar" class="avatar-placeholder">
          <mat-icon>person</mat-icon>
        </div>

        <div class="upload-template-container">
            <input #avatarControl [hidden]="true" id="input-file-id" type="file" accept="image/*" (change)="onAvatarChanged($event)" />
            <label for="input-file-id" class="mat-raised-button">Change Avatar</label>
        </div>
      </div>
    </div>
</form>
</div>
